<template>
	<view class="shop-container">
		<!-- 顶部搜索区域 -->

		<uv-navbar bgColor="#fff" :height="40 + 'px'" :fixed="true" :placeholder="true">
			<template v-slot:left>
				<view class="uv-nav-slot">
					<view class="back-btn" @click="$onClickLeft">
						<uv-icon name="arrow-left" size="18" color="#333" :bold="true"></uv-icon>
					</view>
					<view class="search-box">
						<uv-search
							v-model="keywork"
							:show-action="false"
							placeholder="搜索门店"
							:clearabled="true"
							shape="round"
							bg-color="#F6F6F6"
							placeholder-color="#999"
							@search="search(keywork)">
							<template #prefix>
								<uv-icon name="search" size="18" color="#999"></uv-icon>
							</template>
						</uv-search>
					</view>
				</view>
			</template>
		</uv-navbar>
		<view class="shop-list">
			<z-paging
				ref="paging"
				:auto-height="false"
				:fixed="false"
				v-model="dataList"
				@query="queryList"
				:show-refresher-when-reload="true"
				:auto-show-back-to-top="true"
				:refresher-fps="0"
				:refresher-end-bounce-enabled="false"
				:refresher-default-duration="0"
				:refresher-complete-delay="150"
				refresher-pulling-text="松开刷新"
				refresher-default-text="再往下拉"
				:refresher-complete-duration="0"
				:refresher-refreshing-scrollable="false"
				:paging-style="{ background: '#f5f5f5', paddingBottom: '20rpx' }">
				<template #top></template>
				<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
				<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
				<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
				<!-- 店铺列表 -->

				<view
					class="shop-item"
					v-for="(item, index) in dataList"
					:key="index"
					@click="choice(item)">
					<view class="shop-card">
						<!-- 店铺Logo -->
						<image class="shop-logo" :src="item.image" mode="aspectFill"></image>

						<view class="shop-content">
							<!-- 店铺名称 -->
							<view class="shop-name">{{ item.name }}</view>

							<!-- 制作状态 -->
							<!-- <view class="make-status">
							<text>前方 {{item.queueNum || 0}} 杯制作中</text>
						</view> -->

							<!-- 店铺地址 -->
							<view class="shop-address">
								{{ item.addressMap + ' ' + item.address }}
							</view>

							<!-- 营业时间 -->
							<view class="business-time">
								营业时间: {{ formatDateTime(item.startTime, 'hh:mm') }} -
								{{ formatDateTime(item.endTime, 'hh:mm') }}
							</view>

							<!-- 标签 -->
							<!-- <view class="shop-tags">
							<text class="tag">可外卖</text>
							<text class="tag">接受预定</text>
						</view> -->
						</view>

						<!-- 右侧信息 -->
						<view class="shop-right">
							<view class="distance">{{ kmUnit(item.dis) }}</view>
							<view class="actions">
								<view class="action-btn" @click.stop="call(item.mobile)">
									<uv-icon name="phone" size="20" color="#666"></uv-icon>
								</view>
								<view class="action-btn" @click.stop="openLocation(item)">
									<uv-icon name="map" size="20" color="#666"></uv-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.shop-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f8f8f8;
		.uv-nav-slot {
			margin-left: -10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 3px 7px;
			opacity: 1;
			.back-btn {
				width: 64rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 10rpx;
			}

			.search-box {
				flex: 1;
				:deep(.uv-search) {
					margin: 0;
					height: 60rpx;
					.uv-search__content {
						background: #f6f6f6;
						border-radius: 36rpx;
						border: 1px solid #efefef;
						height: 60rpx;
					}

					.uv-search__placeholder {
						font-size: 28rpx;
					}
				}
			}
		}

		.shop-list {
			flex: 1;
			overflow: hidden;
			.shop-item {
				width: 100%;
				padding: 20rpx 20rpx 0 20rpx;
				overflow: hidden;
			}

			.shop-card {
				display: flex;
				padding: 24rpx;
				border-radius: 12rpx;
				background: #fff;
				position: relative;

				.shop-logo {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
					flex-shrink: 0;
				}

				.shop-content {
					flex: 1;
					margin-right: 20rpx;
					overflow: hidden;
					.shop-name {
						font-size: 32rpx;
						font-weight: 500;
						color: #333;
						margin-bottom: 12rpx;
					}

					.make-status {
						font-size: 26rpx;
						color: #666;
						margin-bottom: 8rpx;
					}

					.shop-address {
						font-size: 26rpx;
						color: #666;
						margin-bottom: 8rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}

					.business-time {
						font-size: 26rpx;
						color: #999;
						margin-bottom: 12rpx;
					}

					.shop-tags {
						display: flex;
						flex-wrap: wrap;
						gap: 12rpx;

						.tag {
							font-size: 22rpx;
							color: #b98657;
							background: rgba(185, 134, 87, 0.1);
							padding: 4rpx 12rpx;
							border-radius: 4rpx;
						}
					}
				}

				.shop-right {
					text-align: right;

					.distance {
						font-size: 28rpx;
						color: #333;
						margin-bottom: 30rpx;
					}

					.actions {
						display: flex;
						justify-content: flex-end;
						gap: 16rpx;

						.action-btn {
							width: 64rpx;
							height: 64rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background: #f5f5f5;
							border-radius: 50%;

							.nav-text {
								font-size: 24rpx;
								color: #b98657;
							}
						}
					}
				}
			}
		}
	}
</style>

<script setup>
	import { ref } from 'vue'
	import { useMainStore } from '@/store/store'
	import { storeToRefs } from 'pinia'
	import { onLoad, onShow, onPullDownRefresh, onHide } from '@dcloudio/uni-app'
	import { formatDateTime, kmUnit, prePage } from '@/utils/util'
	import { shopGetList } from '@/api/market'

	const main = useMainStore()
	const { store, location } = storeToRefs(main)
	const dataList = ref([])
	const paging = ref()
	const keywork = ref('')

	onLoad(() => {})

	const queryList = async (pageNo, pageSize) => {
		try {
			let res = await shopGetList({
				lat: location.value.latitude ? location.value.latitude : 0,
				lng: location.value.longitude ? location.value.longitude : 0,
				kw: keywork.value,
				shop_id: 0,
				pageNo,
				pageSize,
			})
			paging.value?.complete(res)
		} catch (error) {
			paging.value?.complete(false)
		}
	}
	const search = () => {
		paging.value?.reload()
	}
	// 打开定位
	const openLocation = shop => {
		uni.openLocation({
			latitude: parseFloat(shop.lat),
			longitude: parseFloat(shop.lng),
			name: shop.name,
			address: shop.addressMap + shop.address,
			fail: res => {
				console.log(res)
			},
		})
	}

	// 打电话
	const call = mobile => {
		uni.makePhoneCall({
			phoneNumber: mobile,
		})
	}
	// 选中店铺
	const choice = shop => {
		main.SET_STORE(shop)
		uni.$emit('refreshMenu')
		uni.navigateBack()
	}
</script>
